<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> <!-- meta 元数据  字符编码utf-8 -->
		<title>永和大王</title> <!-- 标签页名  网页在浏览器上展示的标题 -->
		<!-- 页面布局方式
		 1)早期习惯使用table表格布局
			<table>表格
			<th>表格头的行
			<tr>表格内容的行
			<td>单元格
			特点:无需写排版代码,会自适应
			缺点:门户网站--早期table布局,所有标签全部解析完才在页面展示
		2)现今使用div布局
			把大页面拆成很多小块,每个小块使用div括起来
			div+css
			特点:加载展现快
		 -->
		 <!-- CSS 全局样式配置
		 在head中添加style片段
		 body代表整个页面标签,修饰整个body中的字体-->
		 <style>
			 
		 	/* 整个页面的字体统一缩小 */
		 	body{
				font-size: 8px; /* 字体的大小--8个像素 */
				/*看元素位置,设置它的边线*/
				border: 0px solid red; /* 边界 */
				width: 250px; /* 边框宽度 */
		 	}
			
			/*共享样式,定义名称,class属性,属性名:me*/
			.me{  /* 自定义属性,名字前面要加. */
				padding-left: 70px; /* padding--留白,向左空70像素 */
			}
			#please{
				font-size: 20px;
				font-weight: bold; /*设置字体加粗:bold--加粗*/
			}
			/*id和class两种属性优先级
			id的优先级高于class
			相同属性,以id设置为优,class设置不生效
			id不存在的属性,class属性样式加以叠加
			*/
		 </style>
	</head>
	<body>
		<div>顾客联</div>
		<br /> <!-- 换行符 -->
		<!-- span--不换行,顶格后自动换行
			 div--每句换行-->
		<span id="please">请您留意</span>
		<span id="please">请您留意</span>
		<div id="please">请您留意取餐的账单号</div>
		<div id="please">请您留意取餐的账单号</div>
		<div class="me">自取顾客联</div></div><!--通过左边空白,用户感官是居中-->
		<div>永和大王(北三环西路店)
		<div>010-12345678</div>
		<div class="me">--结账单--</div>
		<div id="please">账单号:P000010</div>
		<div>账单类型:堂食</div>
		<div>人数:1</div>
		<div>收银员:张静</div>
		<div>开单时间:2018-04-17 07:24:29</div>
		<div>结账时间:2018-04-17 07:24:38</div>
		<!-- hr--横线:默认是实线--solid,需要换线性--虚线:dashed -->
		<hr style="border: 1px dashed;"/>
		<!-- 表格:单元行tr,表头行th,单元格td -->
		<table border="0"> <!-- 设置表格,最初先设置表格边框,表格设计完后再根据需要是否删除边框 -->
			<tr>
				<th width="40" align="center">数量</th> <!-- width--设置单元格宽度,align--设置内容横向位置,默认居左 -->
				<th width="130" align="center">品项</th>
				<th width="50" align="right">金额</th>
			</tr>
			<tr>
				<td valign="top" align="center">1</td> <!-- valign--设置单元格内容纵向位置,默认居中 -->
				<td>
					玉米肉松蛋饼2P<br />
					1 X --玉米肉松蛋饼<br />
					1 X --现磨豆浆(热/甜)
				</td>
				<td valign="top" align="right">8.00</td>
			</tr>
		</table>
		<hr style="border: 1px dashed;"/>
		<table border="0">
			<tr>
				<td width="40">合计</td>
				<td width="185" align="right">8.00</td>
			</tr>
			<tr>
				<td>微支付</td>
				<td align="right">8.00</td>
			</tr>
		</table>
		<hr style="border: 1px dashed;"/>
		<div>打印时间:2018-04-17 07:24:38</div>
		<hr style="border: 1px dashed;"/>
		<div style="padding-top: 15px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴~</div>
		<!-- &nbsp;--空格标识符 -->
		<!-- 插入图片
		图片的路径 
		1.绝对路径:直接访问网上图片
		http://act.codeboy.com/doc/soul/images/investment.jpg
		2.相对路径:
		image/qr.png
		-->
		<img src="image/qr.png" style="padding-left: 65px;"/> 
		
		<div>官网:www.yonghe.com.cn</div>
		<div>加盟热线:86-21-12345678</div>
		<br><br />
		<!-- <br><br />---换行,浏览器解析后变成空格
			 空格--多个空格也视为一个空格-->
	</body>
</html>
